<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>webcam</title>
    <script type="text/javascript" src="https://unpkg.com/jquery@3.0.0/dist/jquery.min.js"></script>
    <script type="text/javascript">
     window.onload = function (){
         try {
             //动态创建一个canvas元 ，并获取他2Dcontext。如果出现异常则表示不支持
             document.createElement("canvas").getContext("2d");
             document.getElementById("support").innerHTML = "浏览器支持HTML5 CANVAS";
         } catch(e){
             document.getElementById("support").innerHTML = "浏览器不支持HTML5 CANVAS";
         }
     };

     //这段代 主要是获取摄像头的视频流并显示在Video 签中
     window.addEventListener("DOMContentLoaded", function () {
         var video = document.getElementById("video");
         var videoObj = { "video": true };
         var errBack = function (error){
            console.log("Video capture error: " + error.message, error.code);
         };
         //  支持浏览器  谷歌,火狐,360,欧朋
         //navigator.getUserMedia这个写法在Opera中好像是navigator.getUserMedianow
         if (navigator.getUserMedia) {
             navigator.getUserMedia(videoObj, function (stream) {
                video.src = stream;
                video.play();
             }, errBack);
         } else if (navigator.webkitGetUserMedia) {
             navigator.webkitGetUserMedia(videoObj, function (stream) {
                 video.src = window.URL.createObjectURL(stream);
                 video.play();
             }, errBack);
         } else if (navigator.mozGetUserMedia){
             navigator.mozGetUserMedia(videoObj, function (stream) {
                      video.src = window.URL.createObjectURL(stream);
                     video.play();
             }, errBack);
         }


         //这个是拍照按钮的事件，
         document.getElementById("snap").addEventListener("click",function(){
                 CatchCode();
         });
     }, false);
     //这个是 刷新上 图像的
     function CatchCode() {
         //实际运用可不写，测试代 ， 为单击拍照按钮就获取了当前图像，有其他用途
         var canvans = document.getElementById("canvas");
         var video = document.getElementById("video");
         var context = canvas.getContext("2d");

         canvas.width = video.videoWidth;
         canvas.height = video.videoHeight;
         context.drawImage(video,0,0);

         //获取浏览器页面的画布对象
         //以下开始编 数据
         var imgData = canvans.toDataURL("image/jpg");
         //将图像转换为base64数据
         var base64Data = imgData.split(",")[1];
     }
    </script>
</head>
    <body>
        <div id="support"></div>
        <div id="contentHolder">
            <video id="video" width="160" height="120" style="border:1px solid red" autoplay></video>
            <button id="snap"> 拍照</button>
            <canvas style="border:1px solid red" id="canvas"></canvas>
        </div>
    </body>
</html>